<!-- eslint-disable vue/no-mutating-props -->
<template>
  <div v-if="newlist && newlist.length">
    <div v-for="(item, index) in newlist" :key="index" style="padding-bottom: 20px">
      <changecaritem :detail="item" :index="index" :orderId="orderId" />
    </div>
  </div>
  <a-empty v-if="newlist.length == 0" style="margin-top: 20vh" />
</template>

<script setup name="shortChangeCarRecoredPage">
  import changecaritem from '@/views/order/short-order/detail/components/changecar-item.vue'
  import { onMounted, ref } from 'vue'
  import { carReplaceList } from '@/api/order/sOrder'
  const props = defineProps({
    orderId: Number,
  })
  const newlist = ref([])
  const getLists = () => {
    carReplaceList({ id: props.orderId }).then((res) => {
      var list = res.result.orderCarInfoList
      const replaceCarInfoList = res.result.replaceCarInfoList

      if (list && list.length) {
        list.forEach((el, i) => {
          if (list[i] && list[i + 1]) {
            newlist.value.push([list[i], list[i + 1]])
          }
        })

        replaceCarInfoList.forEach((item, index) => {
          if (item.replaceGiveId == newlist.value[index][1].id) {
            newlist.value[index][1].replaceStaffPhone = item.replaceStaffPhone
          }
        })
      }
      console.log('newlist', newlist.value)
    })
  }
  onMounted(() => {
    getLists()
  })
</script>

<style lang="less" scoped></style>
